{% extends 'base.html' %}
{% load static %}
{% block css %}
    {{ super }}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 128px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url('{% static 'img/upup.gif' %}') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('{% static 'img/downdown.gif' %}') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        textarea {
            resize: none;
        }
    </style>
{% endblock %}

{% block content %}
    <h1>{{ article_obj.title }}</h1>
    <div class="article_content">
        {{ article_obj.content | safe }}
    </div>
    {#  点赞点踩开始  #}
    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red;">
            </div>
        </div>
    </div>
    {#  点赞点踩结束  #}
    {#  文章评论楼渲染  #}
    <ul class="list-group">

        {% for comment in comment_list %}
            <li class="list-group-item">
                <span>#{{ forloop.counter }}楼</span>
                <span>{{ comment.comment_time|date:'Y-m-d h:i:s' }}</span>
                <span>{{ comment.user.username }}</span>
                <span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
                <div>
{#                    判断当前评论是否是子评论 如果是需要渲染对应的评论人名#}
                    {% if comment.parent_id %}
                        <p>@{{ comment.parent.user.username }}</p>
                    {% endif %}
                    {{ comment.content | safe }}
                </div>
            </li>
        {% endfor %}
    </ul>


    {#  文章评论楼结束 #}
    {#  文章评论开始  #}
    {% if request.user.is_authenticated %}
        <div>
            <p><span class="glyphicon glyphicon-comment"></span>发表评论</p>
            <div>
                <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
            </div>
            <button class="btn btn-primary" id="id_submit">评论</button>
            <span style="color: red;" id="error"></span>
        </div>
    {% else %}
        <ul>
            <li><a href="{% url 'register' %}">注册</a></li>
            <li><a href="{% url 'login' %}">登录</a></li>
        </ul>
    {% endif %}

    {#  文章评论结束  #}
{% endblock %}

{% block js %}
    <script>
        let parentId = null;
        // 给action类绑定事件
        $('.action').click(function () {
            // true就是点赞，false就点踩
            {#$(this).hasClass('diggit') #}
            let isUp = $(this).hasClass('diggit');
            let $div = $(this);
            // 设置一个全局的paretn_id

            // 潮后端发送Ajax请求
            $.ajax({
                url: '{% url 'up_or_down' %}',
                type: 'post',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'is_up': isUp,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    if (args.code === 1000) {
                        $('#digg_tips').text(args.msg);
                        // 将点赞数+1
                        // 先获取到之前的数字
                        let oldNum = $div.children().text();
                        $div.children().text(Number(oldNum) + 1);
                    } else {
                        $('#digg_tips').html(args.msg);
                    }
                },

            });
        });

        $('#id_submit').click(function () {
            let content = $('#id_comment').val();
            // 判断当前评论是否是只评论 如果是 需要将我们之前手动渲染的@username手动去除
            if(parentId) {
                // 先找到\n对应的索引 然后利用切片
                let indexNum = content.indexOf('\n') + 1
                content = content.slice(indexNum);  // 把indexNum之前的所有数据切除 只保留后面的部分
            }
            $.ajax({
                url: '{% url 'comment' %}',
                type: 'post',
                data: {
                    'article_id': '{{ article_id }}',
                    'content': content,
                    'parent_id': parentId,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (args) {
                    if (args.code === 1000) {
                        $('#error').text(args.msg);
                        $('#id_comment').val('');

                        // 临时渲染评论楼
                        let username = '{{ request.user.username }}';
                        let temp = `
                          <li class="list-group-item">
                            <span>${username}</span>
                            <span><a class="pull-right">回复</a></span>
                            <div>
                                ${content}
                            </div>
                            </li>
                        `;
                        $('.list-group').append(temp);
                        // 清空全局的parentId
                        parentId - null;
                    }
                }
            });
        });

        // 给回复按钮绑定点击事件
        $('.reply').click(function() {
            // 评论对应的评论人姓名  还要评论的主键值
            // 获取用户名
            let commentUsername = $(this).attr('username');
            // 获取主键值 修改全局
            parentId = $(this).attr('comment_id');
            // 拼接信息 塞给评论框
            $('#id_comment').val('@' + commentUsername + '\n').focus();

        });

    </script>
{% endblock %}